<template>
  <div class="app-container shutong_tabs" v-loading="loading" element-loading-text="拼命加载中">
    <div v-if="!DTUList.length" class="duankai_div">
      <img src="../../assets/img/duankai.png" alt="">
      <div>未连接DTU设备</div>
    </div>
    <el-tabs v-model="uuid" @tab-click="handleClick">
      <el-tab-pane v-for="item in DTUList" :key="item.uuid" :label="item.name" :name="item.uuid">
        <div class="content_div">
          <slot name="search"></slot>
        </div>
        <div class="table_div">
          <slot name="list"></slot>
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
  import { getManagerDTUInfo, getManagerDTUOnlineStatus } from "@/api/manager";
  import { realTimeData } from "@/api/data";

  export default {
    name: "shutongTabs",
    props: ["rtuIndex", "loading"],
    data() {
      return {
        DTUOnlineList: [],
        DTUList: [],
        uuid: "",
        dataList: [],
        rtuList: []
      }
    },
    watch: {
      rtuIndex(index) {
        if (index == null) {
          this.realTimeData();
        }
      }
    },
    async mounted() {
      await this.getManagerDTUOnlineStatus();
    },
    methods: {
      // 获取DTU在线状态
      async getManagerDTUOnlineStatus() {
        try {
          this.$emit("setLoading", true);
          const { result, message, code } = await getManagerDTUOnlineStatus();
          if (code == 0) {
            this.DTUOnlineList = result.filter(item => item.online);
            this.uuid = this.DTUOnlineList[0].uuid;
            await this.getManagerDTUInfo();
          }
        } catch (err) {
          this.$emit("setLoading", false);
          console.log("调用接口报错了", err);
        }
      },
      // 获取全部DTU信息
      async getManagerDTUInfo() {
        try {
          const { result: { data }, message, code } = await getManagerDTUInfo();
          const list = [];
          if (code == 0) {
            for (let i = 0; i < this.DTUOnlineList.length; i++) {
              const onLineUuid = this.DTUOnlineList[i].uuid;
              for (let j = 0; j < data.length; j++) {
                if (data[j].uuid == onLineUuid) {
                  list.push(data[j]);
                }
              }
            }
            this.DTUList = list;
            this.handleClick();
          }
        } catch (err) {
          this.$emit("setLoading", false);
          console.log("调用接口报错了", err);
        }
      },
      async handleClick() {
        await this.realTimeData();
        this.$emit("tab-click", this.rtuList, this.uuid);
        this.$emit("getList", this.dataList);
      },
      // 获取指定DTU所属全部RTU
      async realTimeData() {
        try {
          this.$emit("setLoading", true);
          const { code, result: { data }, message } = await realTimeData({
            dtuUuid: this.uuid,
            rtuOnline: true,
            rtuIndex: this.rtuIndex,
            // dataStatus: this.dataStatus
          });
          if (code == 0) {
            this.dataList = JSON.parse(JSON.stringify(data));
            this.dataList.sort((firstItem, secondItem) => firstItem.rtuIndex - secondItem.rtuIndex);
            if (this.rtuIndex == null) {
              this.rtuList = JSON.parse(JSON.stringify(this.dataList));
            }
            this.$emit("getList", this.dataList);
            this.$emit("setLoading", false);
          }
        } catch (err) {
          this.$emit("setLoading", false);
          console.log("调用接口报错了获取RTU", err);
        }
      },
    }
  }
</script>

<style lang="scss">
  .shutong_tabs {

    .el-tabs__nav-scroll {
      background-color: #fff;
      padding-left: 34px;
    }

    .content_div {
      height: 83px;
      background-color: #fff;
      margin-bottom: 20px;
      overflow: hidden;
      padding: 29px 0 0 19px;
      box-sizing: border-box;

      .top_span2 {
        /** 文本1 */
        font-size: 14px;
        font-weight: 400;
        color: rgba(0, 0, 0, 0.85);
      }
    }

    .el-tabs__nav-wrap::after {
      background-color: transparent !important;
    }

    .table_div {
      width: 100%;
      height: calc(100vh - 250px);
      background-color: #fff;
      box-sizing: border-box;
      padding: 20px;
    }

    .duankai_div {
      width: 230px;
      height: 110px;
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      text-align: center;

      &>div {
        margin-top: 20px;
        color: #a3afcc;
      }
    }
  }
</style>